<template>
    <div id="roleModify" class="functionalArea">
        <div>
            <el-form class="formEmbedTable" :model="toDetail">
                <table> 
                    <tr>
                        <td>Transaction Sequence No.</td>
                        <td>{{toDetail.flowNo}}</td>	
                    </tr>
                    <tr>
                        <td>Submit</td>
                        <td>{{toDetail.userAlias}}</td>	
                    </tr>
                </table>
            </el-form>
        </div>
        <!-- 修改需要对比-->
        <div v-if="detailData.actionType==1">
            <el-form ref="detailData" :model="detailData" class="formEmbedTable mt20">
                <table>
                    <caption>Modify</caption>
                        <td colspan="2" style="text-align:center;">{{"Before"}}</td>
                        <td colspan="2" style="text-align:center;"> {{"After"}}</td>			
                    <tr id="roleName">
                        <td>Role Name</td>
                        <td> {{oldRole.roleName}}</td>
                        <td>Role Name</td>
                        <td>{{roleInfo.roleName}}</td>					
                    </tr>
                    <tr id="roleType">
                        <td>Category</td>
                        <td>{{$tools.dict.BranchLevel(oldRole.roleType)}}</td>
                        <td>Category</td>
                        <td>{{$tools.dict.BranchLevel(roleInfo.roleType)}}</td>					
                    </tr>
                    <tr id="roleDesc">
                        <td>Description</td>
                        <td >{{oldRole.roleDesc}}</td>
                        <td>Description</td>
                        <td>{{roleInfo.roleDesc}}</td>
                    </tr>
                </table>
            </el-form>  
        </div>
        <div v-else>
            <el-form ref="detailData" :model="detailData" class="formEmbedTable mt20">
                <table>
                    <caption>Role Information</caption>
                    <tr>
                        <td>Role Name</td>
                        <td>{{detailData.roleName}}</td>
                        <td>Category</td>
                        <td>{{$tools.dict.BranchLevel(detailData.roleType)}}</td>					
                    </tr>
                    <tr>
                        <td>Description</td>
                        <td >{{detailData.roleDesc}}</td>
                        <td>Action</td>
                        <td>{{detailData.actionType==0?"Add":detailData.actionType==1 ? "Modify" : "Delete"}}</td>
                    </tr>
                </table>
            </el-form>  
        </div>
        <div class="mt20"><RoleTree :menuTree="menuTree"></RoleTree></div>
        <div class="btnArea mt20 tac">
            <el-button type="primary" @click="agree()">Approve</el-button>
            <el-button type="primary" @click="rules()">Reject</el-button>
            <el-button type="primary" @click="backMain">Back</el-button>
        </div>
        <!--拒绝页面弹窗-->
        <el-dialog :visible.sync="dialogTableVisible" :close-on-click-modal="false" :close-on-press-escape="false">
            <el-form ref="rejectForm" :model="rejectForm" class="formEmbedTable">
                <table>
                    <caption>Refusal reason</caption>
                    <tr>
                        <td>Refusal reason</td>
                        <td>
                            <el-form-item prop="rejReason">
                                <el-input placeholder="Refusal reason" v-model="rejectForm.rejReason"></el-input>
                            </el-form-item>
                        </td>
                    </tr>
                </table>
                <div class="btnArea mt20 tac">
                    <el-button type="primary" @click="dialogTableVisible = false,reject()">Confirm</el-button>
                </div>
            </el-form>
        </el-dialog>
        <!--拒绝页面弹窗end-->
    </div>
</template>
<script>
import ghbIcon from "@src/components/icon";
import RoleTree from "./editTree";
export default {
  name: "roleModify",
  components: {
    ghbIcon,
    RoleTree
  },
  props: ["detailData", "toDetail", "oldDetailData"],
  mounted() {
    
    //------------ 修改前数据--------------------------------------------------------------------------------
    //format 格式{ key :{name:'',value:'',defaultValu:''}}  =====>  {key:value;key:value}
    //格式化修改前角色信息
    if(this.oldDetailData){//如果是修改
      //console.log(123)
      let roleTemp = this.oldDetailData.imRoleList[0];
      let oldRoleTemp = {};
      $.each(roleTemp, function(i, n) {
        oldRoleTemp[i] = n.value;
      });
      
      this.oldRole = oldRoleTemp;
      //格式化修改前角色菜单信息
      let roleBsnTemp = this.oldDetailData.imRoleBsnList;
      let roleBsnTemp1 = []; //所有菜单集合
      
      $.each(roleBsnTemp, function(i, n) {
        let bsnTemp2 = {};
        $.each(n, function(j, m) {
          bsnTemp2[j] = m.value;
        });
        roleBsnTemp1.push(bsnTemp2);
      });
      
      //封装菜单树
      // 一级菜单集合
      let menuTemp = []; //
      let menuTemp1 = [];
      $.each(roleBsnTemp1, function(i, n) {
        if (n.bsnCode.length == 4) {
          n.childrens = [];
          menuTemp.push(n);
          menuTemp1.push(n);
        }
      });
      //获取2级菜单
      $.each(menuTemp, function(i, n) {
        $.each(roleBsnTemp1, function(j, m) {
          if (n.bsnCode == m.bsnCode.slice(0, 4) && n.bsnCode != m.bsnCode) {
            n.childrens.push(m);
            return;
          }
        });
      });

      //------------------------ 修改后数据  -------------------------------------------------------
      //只展示修改的数据  mentuTree
      //format 格式{ key :{name:'',value:'',defaultValu:''}}  =====>  {key:value;key:value}
      //角色信息
      let roleTemp1 = {};
      $.each(this.detailData, function(i, n) {
        if (
          i == "roleName" ||
          i == "roleNo" ||
          i == "roleType" ||
          i == "roleDesc"
        ) {
          roleTemp1[i] = n;
        }
      });
      this.roleInfo = roleTemp1;
      let roleBsn = this.detailData.imBsnList;
      let bsnTemp1 = []; //修改后菜单集合

      $.each(roleBsn, function(i, m) {
        let bsnTemp = {};
        $.each(m, function(j, n) {
          bsnTemp[j] = n.value;
        });
        bsnTemp1.childrens = [];
        bsnTemp1.push(bsnTemp);
      });

      this.roleBsnList = bsnTemp1;
      // 封装树结构
      let bsnTemp3 = []; //一级菜单树
      $.each(bsnTemp1, function(i, n) {
        if (n.bsnCode.length == 4) {
          n.childrens = [];
          bsnTemp3.push(n);
          bsnTemp1.splice(i, 1);
        }
      });
      //console.log("bsnTemp1:" + JSON.stringify(bsnTemp1));
      // console.log("menuTemp:" + JSON.stringify(menuTemp)); ok
      // console.log("menuTemp1:" + JSON.stringify(menuTemp1)); ok
      let lastMenuTree = [];
      $.each(menuTemp1, function(i, m) {
        //讲所有的childrens置空
        m.childrens = [];
      });
      //有问题????????????????????????????????????
      //console.log("menuTemp:" + JSON.stringify(menuTemp));
      //console.log("menuTemp1:" + JSON.stringify(menuTemp1));
      if (bsnTemp3.length == 0) {
        //bsnTemp3一级菜单树
        //没有新增一级菜单，即修改前数据已存在该一级菜单，只需要拿出改菜单展示即可
        let index = 0;
        $.each(bsnTemp1, function(i, n) {
          //便利所有的修改后2级菜单
          let count = 0;
          $.each(menuTemp, function(j, m) {
            //便利所有的修改前的树结构
            if (n.bsnCode.slice(0, 4) == m.bsnCode) {
              index = j;
              $.each(m.childrens, function(k, p) {
                //遍历改树节点子节点
                if (p.bsnCode == n.bsnCode) {
                  //如果该二级菜单已存在
                  count = count + 1;
                  p.oldMenuFlag = p.menuFlag;
                  P.oldMenuAuth = p.menuAuth;
                  p.newMenuFlag = n.menuFlag;
                  p.newMenuAuth = n.menuAuth;
                  lastMenuTree.push(m); //将该一级节点及其子节点放入最终要展示的菜单式
                }
              });
            }
          });
          if (count == 0) {
            //如果二级菜单不存在，新增菜单
            n.oldMenuFlag = "";
            n.oldMenuAuth = "";
            n.menuTreeOption = n.menuFlag;
            n.menuTreeVerify = n.menuAuth;
            menuTemp1[index].childrens.push(n);
          }
        });
        lastMenuTree.push(menuTemp1[index]);
        this.menuTree = lastMenuTree;
        //console.log("lastMenuTree:" + JSON.stringify(lastMenuTree));
      } else {
        //有新增一级菜单，即修改前数据没有该一级菜单  bsnTemp3新增的一级菜单树 bsnTemp1修改后菜单集合
        //二级菜单
        let index = 0;
        let indexArray = [];
        let secBsnTemp = []; //存放二级菜单
        $.each(bsnTemp3, function(j, m) {
          $.each(bsnTemp1, function(i, n) {
            if (n.bsnCode.length == 6 && n.bsnCode.slice(0, 4) == m.bsnCode) {
              n.newMenuFlag = n.menuFlag;
              n.newMenuAuth = n.menuAuth;
              m.childrens.push(n);
            } else {
              secBsnTemp.push(bsnTemp1[i]);
            }
          });
        });
        //同时又增加了二级菜单，相当于修改前存在该一级菜单  menuTemp修改前的临时一级菜单树
        $.each(secBsnTemp, function(i, n) {
          let count = 0;
          $.each(menuTemp, function(j, m) {
            if (n.bsnCode != m.bsnCode && n.bsnCode.slice(0, 4) == m.bsnCode) {
              index = j;
              if (indexArray.indexOf(j) == -1) {
                indexArray.push(j); //数组中不存在该下标
              }
              $.each(m.childrens, function(k, p) {
                //遍历改树节点子节点
                if (p.bsnCode == n.bsnCode) {
                  //如果该二级菜单已存在
                  count = count + 1;
                  p.oldMenuFlag = p.menuFlag; //
                  P.oldMenuAuth = p.menuAuth;
                  p.newMenuFlag = n.menuFlag;
                  p.newMenuAuth = n.menuAuth;
                  bsnTemp3.push(m); //将该一级节点及其子节点放入最终要展示的菜单式
                }
              });
            }
          });
          if (count == 0) {
            //如果二级菜单不存在，新增菜单 menuTemp1修改前的一级菜单树
            n.oldMenuFlag = "";
            n.oldMenuAuth = "";
            n.newMenuFlag = n.menuFlag;
            n.newMenuAuth = n.menuAuth;
            menuTemp1[index].childrens.push(n);
          }
        });

        $.each(indexArray, function(i, n) {
          bsnTemp3.push(menuTemp1[i]);
        });
        this.menuTree = bsnTemp3;
        console.log("bsnTemp3:" + JSON.stringify(bsnTemp3));
      }
      // ------------------   对比修改前修改后数据---------------------------------------------------------------------------
      this.$tools.utils.compareEdit(this.roleInfo, this.oldRole);
    }else{//修改
      //角色信息
      let roleTemp1 = {};
      $.each(this.detailData, function(i, n) {
        if (
          i == "roleName" ||
          i == "roleNo" ||
          i == "roleType" ||
          i == "roleDesc"
        ) {
          roleTemp1[i] = n;
        }
      });
      this.roleInfo = roleTemp1;
      let roleBsn = this.detailData.imBsnList;
      let bsnTemp1 = []; //修改后菜单集合
      $.each(roleBsn, function(i, m) {
        let bsnTemp = {};
        $.each(m, function(j, n) {
          bsnTemp[j] = n.value;
        });
        bsnTemp1.childrens = [];
        bsnTemp1.push(bsnTemp);
      });
      this.roleBsnList = bsnTemp1;
      //console.log("bsnTemp1:" + JSON.stringify(bsnTemp1));
      // 封装树结构
      let bsnTemp3 = []; //一级菜单树
      $.each(bsnTemp1, function(i, n) {
        if (n.bsnCode.length == 4) {
          n.childrens = [];
          bsnTemp3.push(n);
          bsnTemp1.splice(i, 1);
        }
      });
      //console.log("bsnTemp3:" + JSON.stringify(bsnTemp3));
      //console.log("bsnTemp1:" + JSON.stringify(bsnTemp1));
      $.each(bsnTemp1,function(i,m){
        $.each(bsnTemp3,function(j,n){
          if(m.bsnCode.length==6 && (m.bsnCode).slice(0,4)==n.bsnCode){
            m.oldMenuFlag = ""; //
            m.oldMenuAuth = "";
            m.newMenuFlag = m.menuFlag;
            m.newMenuAuth = m.menuAuth;
            bsnTemp3[j].childrens.push(m);
          }
        })
        
      })
      this.menuTree = bsnTemp3;
      //console.log("bsnTemp3:" + JSON.stringify(bsnTemp3));

    }
    
    
    
    
  },
  data() {
    return {
      menuTree: [], //菜单树
      roleBsnList: [], //修改后角色菜单
      roleInfoList: [], //未用到
      roleInfo: {}, //修改后角色信息
      oldRole: {}, //修改前角色信息
      rejectForm: {
        //审核拒绝列表
        actionFlag: "",
        bsnAuthList: [],
        authFlag: "1",
        rejReason: ""
      },
      agreeForm: {
        actionFlag: "",
        bsnAuthList: [],
        authFlag: "0"
      },
      dialogTableVisible: false
    };
  },
  methods: {
    backMain() {
      this.$emit("back");
    },
    rules() {
      //判断是否选中数据
      this.dialogTableVisible = true;
    },
    agree() {
      //判断是否选中数据
      this.agreeForm.bsnAuthList.push(this.toDetail);
      this.$tools.request(this, this.toDetail.bsnCode + "AuthAction.do", this.agreeForm).then(data => {
          if (data.body.errorCode == 0) {
            this.$message({
              type: "success",
              message: "Success",
              showClose: true
            });
            this.$emit("back");
          } else {
            this.$alert("System Error Try again", "warning", {
              confirmButtonText: "Confirm",
              callback: action => {}
            });
          }
        });
    },
    reject() {
      this.rejectForm.bsnAuthList.push(this.toDetail);
      console.log("rejectForm" + JSON.stringify(this.rejectForm));
      this.$tools
        .request(this, this.toDetail.bsnCode + "AuthAction.do", this.rejectForm)
        .then(data => {
          if (data.body.errorCode == 0) {
            this.$message({
              type: "success",
              message: "Success",
              showClose: true
            });
            this.$emit("back");
          } else {
            this.$alert("System Error Try again", "warning", {
              confirmButtonText: "Confirm",
              callback: action => {}
            });
          }
        });
    }
  }
};
</script>
